<template>
    <div class="page page-association-home page-full has-headbar">
      <head-bar :title="$route.meta.title" :prevRoute="{name: 'home'}" />
      <search class="search-section" placeholder="请输入协会或组织名称" v-model="searchValue" @search="onSearch" />
      <div class="association-list">
        <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
          <van-list
            class="list-container"
            v-model="moreLoading"
            :finished="moreFinished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad">
            <router-link tag="div"  class="item" v-for="item in list" :key="item.id" :to="{ name: 'association-detail', params: { id: item.id } }">
              <div class="imgOut" :style="{backgroundImage:`url(${item.headImg})`}">
              </div>
              <div class="info">
                <h3>{{item.name}}</h3>
                <p>地址：{{item.address}}</p>
              </div>
            </router-link>
            <!-- <empty-data :empty="list.length === 0 && !moreLoading"></empty-data> -->
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
</template>
<script>
import Search from '@/components/Search'
import { API_GET_ASSOCIATION_PAGING } from '@/service/association'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'association-list',
  components: {
    Search
  },
  data () {
    return {
      searchValue: '',
      list: [],
      pageSize: 8,
      pageNumber: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
      searchLoading: false,
      searchState: false
    }
  },
  computed: {
    reqData () {
      return {
        nameLike: this.searchState ? this.searchValue : '',
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
    }
  },
  mounted () {
    this.wechatHideMenu()
    this.moreLoading = true
    this.requestData(resData => {
      this.list = resData.list.resultList
    }).finally(() => {
      this.moreLoading = false
    })
  },
  watch: {
    searchValue (newValue) {
      if (!newValue) {
        this.searchState = false
      }
    }
  },
  methods: {
    requestData (callback) {
      return API_GET_ASSOCIATION_PAGING(this.reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      })
    },
    onLoad () {
      if (this.refreshLoading || this.searchLoading) {
        this.moreLoading = false
        return
      }
      this.requestData(resData => {
        this.list = [...this.list, ...resData.list.resultList]
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onRefresh () {
      this.pageNumber = 0
      API_GET_ASSOCIATION_PAGING(this.reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      }).finally(() => {
        this.refreshLoading = false
      })
    },
    onSearch () {
      if (!this.searchValue) return
      this.searchLoading = true
      this.searchState = true
      this.pageNumber = 0
      API_GET_ASSOCIATION_PAGING(this.reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      })
    }
  }
}
</script>
<style lang="less">
  .page-association-home{
    display: flex;
    flex-direction: column;
    .search-section{
      margin: 10px auto 10px;
    }
    /*列表*/
    .association-list{
      flex: 1;
      overflow: auto;
      .item{
        box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
        border-radius: 5px;
        margin: 10px;
        padding: 10px;
        display:flex;
        .imgOut {
          display: inline-block;
          width: 55px;
          height: 55px;
          border-radius: 55px;
          vertical-align: middle;
          overflow: hidden;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
        .info{
          flex:1;
          padding-left:10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          h3{
            font-size:18px;
            padding-bottom:10px;
          }
          p{
            font-size:14px;
            line-height:20px;
          }
        }
      }
    }
    .list-container{
      min-height: calc(100vh - 180px);
    }
  }
</style>
